<template>
	<view class="staff">
		<view class="content">
			<view class="staff-list">
				<view class="staff-item" v-for="(value,key) in list" :key="key">
					<image :src="value.avatar" mode="" style="width: 120rpx;height: 120rpx;">
					</image>
					<view class="info">
						<view class="row">
							<view class="col">
								<text class="label">昵称：</text>
								{{ value.nickname }}
							</view>
							<view class="col">
								<text class="label">用户ID：</text>
								{{ value.id }}
							</view>
						</view>
						<view class="row">
							<view class="col">
								<text class="label">手机：</text>
								{{ value.mobile || '未绑定' }}
							</view>
							<view class="col">
								<text class="label">推广类型：</text>{{value.promotion_str}}
							</view>
						</view>
						<view class="row">
							<!-- <view class="col">
								<text class="label">地区：</text>贵州贵阳
							  </view> -->
							<!-- <view class="col">
								<text class="label">级别：</text>
								{{ value.level_name }}
							</view> -->
							<view class="col">
								<text class="label">注册时间：</text>
								{{ value.create_time }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';
	const props = defineProps({
		list: {
			type: [Array, Object],
			default: () => { //定义默认值
				return []
			}
		},
	})
</script>

<style lang="scss">
	.staff {
		.top {
			@include f-center(column);

			.money,
			.label,
			.num {
				color: $u-reverse-color;
				font-size: $font-24;
			}

			.num {
				font-weight: bold;
				font-size: $font-36;
			}

			.achievement {
				display: flex;
				width: 100%;
				//padding: $m24;

				.achievement-item {
					flex: 1;
					@include f-center(column);
					margin: 0 $m12;
					padding: $m12 0;
					border: 1px solid rgba(255, 255, 255, 0.6);
					border-radius: $radius-8;

					.money {
						font-size: $font-48;
						font-weight: bold;
					}
				}
			}
		}

		.content {
			padding: 0 $m24;

			.filter {
				@include f-between;
				padding: $m24 0;

				.filter-options {
					@include f-center;
					background-color: $u-bg-color;
					height: 64rpx;
					margin-right: $m32;
					padding: 0 1em;
					font-size: $font-24;
					border-radius: $radius-100;
				}
			}

			.staff-list {
				.staff-item {
					@include f-between;
					padding: $m24 0;
					border-bottom: 1px solid $u-border-color;

					image {
						border-radius: 50%;
					}

					.info {
						overflow: hidden;
						flex: 1;
						margin-left: $m24;

						.row {
							display: flex;

							.col {
								flex: 1;
								color: $u-tips-color;
								font-size: $font-24;

								.label {
									color: $u-main-color;
								}
							}
						}
					}
				}
			}
		}
	}
</style>